import React, { useState } from 'react'
import style from './style.module.scss'
import AvatarView from '../../AvatarView'
import { LikeOutLineBtn } from '../../Button/LikeBtn'
import { ArrowDownOutlined, HeartFilled, HeartOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMapMarker } from '@fortawesome/free-solid-svg-icons'

interface FollowCardProps {
    date: any
}

export default function FollowCard(props: FollowCardProps) {
    const [isLike, setIsLike] = useState(false)
    return (
        <Link to={'/user/photos/' + props.date.userId} className={style.container}>
            <div className={style.user__bar}>
                <AvatarView width={'42px'} height={'42px'} img={props.date.avatar} />
                <span>{props.date.userName}</span>
            </div>
            <div className={style.img}>
                <img src={props.date.imgUrl} />
            </div>
            <div className={style.btn__bar}>
                <div className={style.location}>
                    <FontAwesomeIcon icon={faMapMarker} />
                    <Link to={'/search/photos/' + props.date.location}>{props.date.location}</Link>
                </div>
                <div className={style.right}>
                    {isLike ? (
                        <HeartFilled
                            className={style.like}
                            onClick={() => {
                                setIsLike(!isLike)
                            }}
                        />
                    ) : (
                        <HeartOutlined
                            className={style.unlike}
                            onClick={() => {
                                setIsLike(!isLike)
                            }}
                        />
                    )}
                    <ArrowDownOutlined className={style.download} />
                </div>
            </div>
        </Link>
    )
}
